<template>
  <XcDrawer ref="drawer" :title="$t('page.base.ns')" :width="640" @onDrawerSave="onSave">
    <Form ref="nsform" :model="namespace" :label-width="0" :rules="rules">
      <FormItem prop="name">
        <Input v-model="namespace.name" maxlength="16" :placeholder="$t('page.base.ns')" :show-word-limit="adding" :disabled="!adding"></Input>
      </FormItem>
      <FormItem prop="remark">
        <Input v-model="namespace.remark" type="textarea" show-word-limit maxlength="64" :autosize="{minRows:3}" :placeholder="$t('form.remark')"></Input>
      </FormItem>
    </Form>
  </XcDrawer>
</template>
<script>
  import XcDrawer from '@/components/xcdrawer'
  export default {
    name: 'comp-ns-edit',
    components: { XcDrawer },
    data() {
      return {
        adding: false,
        namespace: {
          name: '',
          remark: ''
        },
        rules: {
          name: [{ required: true, max: 16, pattern: /^[a-zA-Z][a-zA-Z0-9_]{1,16}/, message: this.$t('page.base.nsform.namerule'), trigger: 'blur' }],
          remark: [{ required: true, max: 64, message: this.$t('form.inputrule', [this.$t('form.remark')]), trigger: 'blur' }],
        },
      }
    },
    methods: {
      show(ns) {
        this.$refs.nsform.resetFields()
        //
        ns = ns || {}
        this.namespace.name = ns.namespace || ''
        this.namespace.remark = ns.remark || ''
        this.adding = this.namespace.name === ''
        this.$refs.drawer.show()
      },
      onSave() {
        this.$refs.nsform.validate((valid) => {
          if (valid) {
            let name = this.namespace.name.toUpperCase()
            this.$md.dispatch('ns_edit', {
              data: {
                namespace: name,
                remark: this.namespace.remark,
              }
            }).then(data => {
              if (data.retCode === 1) {
                this.$storage.resetNamespace()
                this.$Message.success(this.$t('submitok'))
                this.$refs.drawer.close(true)
                this.$emit('onRefresh')
              }
            })
          }
        })
      }
    }
  }
</script>
